<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="Kwh">
        <script src="../js/jquery-3.1.1.js"></script>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                box-sizing: border-box;
            }
            section{
                margin: 0 auto;
                width: 400px;
                border: 1px solid black;
            }
            div{
                width: 400px;
                height: 30px;
                background-color: black;
            }
            span{
                margin: 0;
                display: inline-block;
                width: 60px;
                height: 30px;
                color: white;
                text-align: center;
                line-height: 1.5;
                float: left;
            }
            .sp1{
                background-color: gray;
            }
            ul{
                list-style: none;
                margin: 0 auto;
                padding: 0;
                margin-left: 160px;
            }
            .ul1{
                display: block;
                line-height: 1.5;
            }
            .ul2{
                display: none;
                line-height: 1.5;
            }
            .ul3{
                display: none;
                line-height: 1.5;
            }
        </style>
    </head>
    <body>
        <section>
            <div>
                <span class="sp1">选项一</span>
                <span class="sp2">选项二</span>
                <span class="sp3">选项三</span>
            </div>
            <ul class="ul1">
                <li>内容一</li>
                <li>内容一</li>
                <li>内容一</li>
                <li>内容一</li>
                <li>内容一</li>
                <li>内容一</li>
                <li>内容一</li>
                <li>内容一</li>
            </ul>
            <ul class="ul2">
                <li>内容二</li>
                <li>内容二</li>
                <li>内容二</li>
                <li>内容二</li>
                <li>内容二</li>
                <li>内容二</li>
                <li>内容二</li>
                <li>内容二</li>
                <li>内容二</li>
                <li>内容二</li>
                <li>内容二</li>
                <li>内容二</li>
            </ul>
            <ul class="ul3">
                <li>内容三</li>
                <li>内容三</li>
                <li>内容三</li>
                <li>内容三</li>
                <li>内容三</li>
            </ul>
        </section>
    </body>
</html>
<script>
    // 给span标签绑定鼠标事件
    $('span').mousemove(function(){
        // 当前对象的背景颜色改变
        $(this).css('background-color','gray')
        .siblings().css('background-color','black')
        // 当移动到第一个span上时显示ul1
        // 下面依次类推
        if($(this).hasClass('sp1')==true){
            $('.ul1').css('display','block')
            $('.ul2').css('display','none')
            $('.ul3').css('display','none')
        }else if($(this).hasClass('sp2')==true){
            $('.ul1').css('display','none')
            $('.ul2').css('display','block')
            $('.ul3').css('display','none')
        }else if($(this).hasClass('sp3')==true){
            $('.ul1').css('display','none')
            $('.ul2').css('display','none')
            $('.ul3').css('display','block')
        }
    })



</script>